import React, { useState, useEffect } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import { InterfaceG } from "@config/Config";
import XhfThreeInfo from "../components/xhfThreeInfo";
import yhTools from "@tools/yh";
import { checkBonus } from "@redux/Action/bank/bank";
import creditStore from "../creditStore";

const ThreeElementPage = props => {
	//pageState
	const [threeElementParams, setThreeElementParams] = useState({}); //三要素信息
	const [mobilePhone, setMobilePhone] = useState(""); //预留手机号
	const [inputDisabled, setInputDisabled] = useState(false); //是否禁用身份证、姓名输入框
	const [disablePhone, setDisablePhone] = useState(false); //是否禁用手机号输入框
	const [bannerList, setBannerList] = useState(""); //头部banner

	//反显三要素
	const queryTwoElementInfoAndMobilePhone = () => {
		const objs = {
			url: InterfaceG.xhf_credit_initThreeElement,
			params: {}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data;
				if (data.userName && data.idNo) {
					setThreeElementParams({
						idNo: data.idNo,
						userName: data.userName
					});
					setInputDisabled(true);
				}
				if (data.mobilePhone) {
					setMobilePhone(data.mobilePhone);
					setDisablePhone(true);
				}
				Toast.hide();
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	//获取顶部banner
	const getBannerList = () => {
		let _pageType =
			props.currentCode == "614" ? "XHF_614_AUTH_PAGE" : "xhf_auth_image";
		const params = {
			url: InterfaceG.getChannelBannerList,
			params: {
				pageType: _pageType,
				productNo: "601"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code, data = {} } = res;
			if (code == "0") {
				let bannerList = [];
				let bannerObj = data["1"] && data["1"].length > 0 ? data["1"]["0"] : {};
				bannerObj["link"] = bannerObj.linkUrl;
				bannerList.push(bannerObj);
				setBannerList(bannerList);
			}
		});
	};

	useEffect(() => {
		console.log("【三要素】props:", props);
		props._checkBonus(`${props.currentCode}0${props.current}`);
		queryTwoElementInfoAndMobilePhone();
		getBannerList();
	}, []);

	//提交三要素
	const submitHandle = values => {
		console.log("三要素提交参数：", values);
		let objs = {
			url: InterfaceG.xhf_credit_submitThreeElement,
			params: values,
			_alertShow: false
		};
		Toast.loading("加载中...");
		yhTools.request(objs).then(async res => {
			Toast.hide();
			if (res.code === "0") {
				const openStatus = res.data.applyStatus || "";
				const failMessage = res.message || "";
				props.goNext(openStatus, failMessage);
			} else {
				Toast.info(res.message, 5);
			}
		});
	};

	const pageParams = {
		header: {
			title: "实名认证"
		},
		cacheLifecycles: props.cacheLifecycles,
		isModal: true,
		history: props.history
	};

	return (
		<MainLayout pageParams={pageParams} handleBack={props.handleBack}>
			<XhfThreeInfo
				{...props}
				pageParams={{
					...threeElementParams,
					userBankPhone: mobilePhone,
					inputDisabled,
					disablePhone,
					bannerList
				}}
				Submit={submitHandle}
			></XhfThreeInfo>
		</MainLayout>
	);
};

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => {
	return {
		_checkBonus: (val1, val2) => dispatch(checkBonus(val1, val2))
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(creditStore(ThreeElementPage));
